<template>
    <div>
        <Modal
            :value="isShow"
            @on-cancel="
                $emit('cancel');
                step = 1;
            "
        >
            <div slot="header" class="header">
                <div v-if="step == 1">
                    添加图片
                </div>

                <div v-if="step == 2">
                    上传图片至媒体库
                </div>
            </div>
            <div v-if="isShow">
                <Step1
                    v-if="step == 1"
                    @changeStep="step = 2"
                    ref="step1"
                    :arr="arr"
                />
                <Step2 v-if="step == 2" @upover="allover = false" ref="step2" />
            </div>
            <div slot="footer">
                <div v-if="step == 1">
                    <Button @click="$emit('cancel')">取消</Button>
                    <Button type="primary" @click="okHandler">确定</Button>
                </div>
                <div v-if="step == 2">
                    <Button @click="step = 1">返回</Button>
                    <Button
                        type="primary"
                        @click="step2Handler"
                        :disabled="allover"
                        >上传</Button
                    >
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import Step1 from "./Step1.vue";
import Step2 from "./Step2.vue";
import axios from "axios";
export default {
    components: {
        Step1,
        Step2
    },
    props: ["isShow", "arr"],
    data() {
        return {
            // 步骤1,2
            // 步骤一：媒体库
            // 步骤二：上传图片至媒体库
            step: 1,
            allover: true
        };
    },

    methods: {
        okHandler() {
            const choosedPic = this.$refs.step1.choosedfilename;
            this.$emit("choosedok", choosedPic);
        },
        step2Handler() {
            axios
                .post("/api/savepic", {
                    filenamearr: this.$refs.step2.serveFileNameArr,
                    directory: this.$refs.step2.choosedDirectory
                })
                .then(data => {
                    if (data.data == "ok") {
                        // step2就消亡了，n变成0
                        this.step = 1;
                    }
                });
        }
    }
};
</script>

<style lang="less"></style>
